<template>
     <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul>
                <li :class="{disabled:pageNo==1?true:false}" class="prev ">
                  <a @click="$emit('nowNum',pageNo-1)">«上一页</a>
                </li>

                <!-- 第一页 -->
                <li :class="{active:startAndEnd.start==1}">
                  <a v-if="startAndEnd.start!='1'" @click="$emit('nowNum',1)">1</a>
                </li>
                <li class="dotted" v-if="startAndEnd.start>2"><span>...</span></li>

                <!-- 连续的部分 -->
                <li  v-for="continueNum in startAndEnd.end" :key="continueNum"  v-if="continueNum>=startAndEnd.start" @click="$emit('nowNum',continueNum)" :class="{active:continueNum==pageNo}">
                  <a>{{continueNum}}</a>
                </li>

                <li class="dotted" v-if="startAndEnd.end<totalPage-1"><span>...</span></li>

                <!-- 最后一页 -->
                <li :class="{active:startAndEnd.start==totalPage}" >
                  <a v-if="startAndEnd.end!=totalPage" @click="$emit('nowNum',totalPage)">{{totalPage}}</a>
                </li>


                <li class="next" :class="{disabled:pageNo==totalPage?true:false}">
                  <a @click="$emit('nowNum',pageNo+1)">下一页»</a>
                </li>
                
              </ul>
              <div ><span >共{{totalPage}}页&nbsp;</span></div>
            </div>
          </div>
</template>

<script>
export default {
    name:"Pager",
    props:['total','pageSize','pageNo','continues'],
    computed:{
        totalPage(){
          return Math.ceil(this.total/this.pageSize)
        },
        startAndEnd(){
          const {continues,totalPage,pageNo} = this;
          let start=0;
          let end=0;
          if(continues>totalPage){
            start = 1,
            end = totalPage
          }else {
            start= pageNo-parseInt(continues/2)
            end= pageNo+parseInt(continues/2)
             if(start<1){
                start = 1;
                end = continues;
             }else if(end>totalPage) {
                end = totalPage;
                start  = totalPage - continues+1
             }else if(start == 2){
              end = continues
             }else if(end == totalPage-1){
              start =  pageNo-parseInt(continues/2)+1
             }
          }

          return {start,end}
        }
    }
}
</script>

<style scoped lang="less">
  .page {
        height: 66px;
        overflow: hidden;
         display: flex;
        justify-content: center; /* 水平居中 */
        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;
            vertical-align: middle;
            float: left;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                position: relative;
                float: left;
                line-height: 18px;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #e0e9ee;
                margin-left: -1px;
                font-size: 14px;
                padding: 9px 18px;
                color: #333;
              }

              &.active {
                a {
                  background-color: #409eff;
                  color: #e1251b;
                  border-color: #fff;
                  cursor: not-allowed;
                  
                }
              }

              &.prev {
                a {
                  background-color: #fafafa;
                }
              }

              &.disabled {
                a {
                  color: #999;
                  cursor: not-allowed;
                }
              }

              &.dotted {
                span {
                  margin-left: -1px;
                  position: relative;
                  float: left;
                  line-height: 18px;
                  text-decoration: none;
                  background-color: #fff;
                  font-size: 14px;
                  border: 0;
                  padding: 9px 18px;
                  color: #333;
                }
              }

              &.next {
                a {
                  background-color: #fafafa;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            height: 41px;
            line-height: 40px;
          }
        }
      }
</style>